// import React,{useMemo,useCallback,useState} from 'react'

// export default function My() {
//   const [nums,setNums] = useState(0)

//   const thisNum = useMemo(()=>{
//     if(nums>5){
//       return nums+5
//     }
//   },[nums])

//   return (
//     <div>
//       <button onClick = {()=>setNums(nums+1)}>setNums</button>
//       <p>nums:{nums}</p>
//       <p>this.Num:{thisNum}</p>
//     </div>
//   )
// }



// <!DOCTYPE html>
// <html lang="en">

// <head>
//     <meta charset="UTF-8">
//     <meta http-equiv="X-UA-Compatible" content="IE=edge">
//     <meta name="viewport" content="width=device-width, initial-scale=1.0">
//     <title>Document</title>
// </head>

// <body>
//     <div id="app"></div>
//     <script>
//         // 虚拟dom就是一个js对象，用于描述dom节点的js对象，将这个js对象转换为真实的dom
//         var arr = {
//             type: 'div',
//             props: {
//                 class: "box",
//                 children: [
//                     {
//                         type: 'span',
//                         props: {
//                             children: ['苹果']
//                         }
//                     },
//                     {
//                         type: 'span',
//                         props: {
//                             children: ['橘子']
//                         }
//                     }
//                 ]
//             }
//         }
//         // 将虚拟的dom对象渲染为真实的dom节点
//         function render(jsx, root) {
//             let createElement = (jsx, parent) => {
//                 // 用于承接创建出来的dom元素
//                 let cur = null
//                 let { type, props } = jsx
//                 if (typeof (jsx) === "string") {
//                     cur = document.createTextNode(jsx)
//                     parent.append(cur)
//                 } else {
//                     cur = document.createElement(type)
//                     parent.append(cur)
//                     // Object.keys()对象名转换为数组
//                     Object.keys(props).forEach((item, index) => {
//                         if (item === 'class') {
//                             cur.setAttribute('class', props[item])
//                         } else if (item === "children") {
//                             if (Array.isArray(props[item])) {
//                                 props[item].map((val => {
//                                     createElement(val, cur)
//                                 }))
//                             }
//                         }
//                     })
//                 }
//             }
//             createElement(jsx,root)
//         }
//         // 被渲染数据的名字，，被渲染容器的名字，id名不需要获取
//         render(arr, app);
//     </script>
// </body>

// </html>
 

import React,{Component,PureComponent} from 'react'

interface MYPROPS{

}
interface MYSTATE{

}
export class My extends Component {
  state={
    num:0
  }

  handLeClick = () =>{
    this.setState({
      num:5
    })
  }
  render() {
    return (
      <div>
        <button onClick={()=>this.handLeClick()}></button>
        <p>num:{this.state.num}</p>
      </div>
    )
  }
}

export default My
